<template>
  <div>
    <p>{{ count }}</p>
    <button @click="sub">-1</button>
    <button @click="handleClick">-1</button>
    <button @click="subN(8)">-8</button>
    <button @click="subAsync">async -1</button>
    <button @click="subNAsync(8)">async -8</button>
    <p>{{ showNum }}</p>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions, mapGetters } from 'vuex'
export default {
  computed: {
    // mapState 调用完毕返回的是一个对象
    ...mapState(['count']),
    ...mapGetters(['showNum'])
  },
  // computed: mapState(['count']),
  created() {
    console.log(mapState(['count']))
  },
  methods: {
    ...mapMutations(['sub', 'subN']),
    ...mapActions(['subAsync', 'subNAsync']),
    handleClick() {
      this.sub()
    }
  }
}
</script>
